<div class="easyui-layout" data-options="fit:true">
	<div data-options="region:'west',border:true,split:true," title="分类管理" style="width:150px; padding:5px;">
		<ul id="wu-category-tree" class="easyui-tree"></ul>
	</div>
	<div data-options="region:'center',border:false">
		<!-- Begin of toolbar -->
		<div id="wu-toolbar">
			<div class="wu-toolbar-button">
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel()" plain="true">取消</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-print" onclick="openAdd()" plain="true">打印</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-help" onclick="openEdit()" plain="true">帮助</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-undo" onclick="remove()" plain="true">撤销</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-redo" onclick="cancel()" plain="true">重做</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-sum" onclick="reload()" plain="true">总计</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-back" onclick="reload()" plain="true">返回</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-tip" onclick="reload()" plain="true">提示</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="reload()" plain="true">保存</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cut" onclick="reload()" plain="true">剪切</a>
			</div>
			<div class="wu-toolbar-search">
				<label>起始时间：</label><input class="easyui-datebox" style="width:100px">
				<label>结束时间：</label><input class="easyui-datebox" style="width:100px">
				<label>用户组：</label>
				<select class="easyui-combobox" panelHeight="auto" style="width:100px">
					<option value="0">选择用户组</option>
					<option value="1">黄钻</option>
					<option value="2">红钻</option>
					<option value="3">蓝钻</option>
				</select>
				<label>关键词：</label><input class="wu-text" style="width:100px">
				<a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
			</div>
		</div>
		<!-- End of toolbar -->
		<table id="wu-datagrid" toolbar="#wu-toolbar"></table>
	</div>
</div>
<!-- Begin of easyui-dialog -->
<div id="wu-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
	<form id="wu-form" method="post">
		<table>
			<tr>
				<td width="60" align="right">姓 名:</td>
				<td><input type="text" name="name" class="wu-text" /></td>
			</tr>
			<tr>
				<td align="right">邮 箱:</td>
				<td><input type="text" name="email" class="wu-text" /></td>
			</tr>
			<tr>
				<td align="right">主 题:</td>
				<td><input type="text" name="subject" class="wu-text" /></td>
			</tr>
			<tr>
				<td valign="top" align="right">内 容:</td>
				<td><textarea name="content" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
			</tr>
		</table>
	</form>
</div>
<!-- End of easyui-dialog -->
<script type="text/javascript">
	/**
	 * Name 载入菜单树
	 */
	$('#wu-category-tree').tree({
		//		url:'temp/menu.json',
		data: [{
			"id": 1,
			"text": "首页",
			"state": "",
			"attributes": {
				"url": "",
				"icon": "fa-glass"
			},
			"children": [{
				"id": 2,
				"text": "系统管理",
				"state": "",
				"attributes": {
					"url": "",
					"icon": ""
				},
				"children": [{
					"id": 3,
					"text": "<font class='fa fa-glass'></font>用户管理",
					"state": "",
					"iconCls":"",
					"attributes": {
						"url": "datagrid.html",
						"icon": ""
					}
				}, {
					"id": 4,
					"text": "角色管理",
					"state": "",
					"attributes": {
						"url": "_content.html",
						"icon": ""
					}
				}, {
					"id": 5,
					"text": "菜单管理",
					"state": "",
					"attributes": {
						"url": "datagrid.html",
						"icon": ""
					}
				}, {
					"id": 6,
					"text": "权限管理",
					"state": "",
					"attributes": {
						"url": "_content.html",
						"icon": ""
					}
				}]
			}]
		}],
		onClick: function(node) {
			alert(node.text);
		}
	});

	/**
	 * Name 添加记录
	 */
	function add() {
		$('#wu-form').form('submit', {
			url: '',
			success: function(data) {
				if(data) {
					$.messager.alert('信息提示', '提交成功！', 'info');
					$('#wu-dialog').dialog('close');
				} else {
					$.messager.alert('信息提示', '提交失败！', 'info');
				}
			}
		});
	}

	/**
	 * Name 修改记录
	 */
	function edit() {
		$('#wu-form').form('submit', {
			url: '',
			success: function(data) {
				if(data) {
					$.messager.alert('信息提示', '提交成功！', 'info');
					$('#wu-dialog').dialog('close');
				} else {
					$.messager.alert('信息提示', '提交失败！', 'info');
				}
			}
		});
	}

	/**
	 * Name 删除记录
	 */
	function remove() {
		$.messager.confirm('信息提示', '确定要删除该记录？', function(result) {
			if(result) {
				var items = $('#wu-datagrid').datagrid('getSelections');
				var ids = [];
				$(items).each(function() {
					ids.push(this.productid);
				});
				//alert(ids);return;
				$.ajax({
					url: '',
					data: '',
					success: function(data) {
						if(data) {
							$.messager.alert('信息提示', '删除成功！', 'info');
						} else {
							$.messager.alert('信息提示', '删除失败！', 'info');
						}
					}
				});
			}
		});
	}

	/**
	 * Name 打开添加窗口
	 */
	function openAdd() {
		$('#wu-form').form('clear');
		$('#wu-dialog').dialog({
			closed: false,
			modal: true,
			title: "添加信息",
			buttons: [{
				text: '确定',
				iconCls: 'icon-ok',
				handler: add
			}, {
				text: '取消',
				iconCls: 'icon-cancel',
				handler: function() {
					$('#wu-dialog').dialog('close');
				}
			}]
		});
	}

	/**
	 * Name 打开修改窗口
	 */
	function openEdit() {
		$('#wu-form').form('clear');
		var item = $('#wu-datagrid').datagrid('getSelected');
		//alert(item.productid);return;
		$.ajax({
			url: '',
			data: '',
			success: function(data) {
				if(data) {
					$('#wu-dialog').dialog('close');
				} else {
					//绑定值
					$('#wu-form').form('load', data)
				}
			}
		});
		$('#wu-dialog').dialog({
			closed: false,
			modal: true,
			title: "修改信息",
			buttons: [{
				text: '确定',
				iconCls: 'icon-ok',
				handler: edit
			}, {
				text: '取消',
				iconCls: 'icon-cancel',
				handler: function() {
					$('#wu-dialog').dialog('close');
				}
			}]
		});
	}

	/**
	 * Name 分页过滤器
	 */
	function pagerFilter(data) {
		if(typeof data.length == 'number' && typeof data.splice == 'function') { // is array                
			data = {
				total: data.length,
				rows: data
			}
		}
		var dg = $(this);
		var opts = dg.datagrid('options');
		var pager = dg.datagrid('getPager');
		pager.pagination({
			onSelectPage: function(pageNum, pageSize) {
				opts.pageNumber = pageNum;
				opts.pageSize = pageSize;
				pager.pagination('refresh', {
					pageNumber: pageNum,
					pageSize: pageSize
				});
				dg.datagrid('loadData', data);
			}
		});
		if(!data.originalRows) {
			data.originalRows = (data.rows);
		}
		var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
		var end = start + parseInt(opts.pageSize);
		data.rows = (data.originalRows.slice(start, end));
		return data;
	}

	/**
	 * Name 载入数据
	 */
	$('#wu-datagrid').datagrid({
		//url:'temp/datagrid.json',
		loadFilter: pagerFilter,
		rownumbers: true,
		singleSelect: false,
		pageSize: 20,
		pagination: true,
		multiSort: true,
		fitColumns: true,
		fit: true,
		columns: [
			[{
					checkbox: true
				},
				{
					field: 'productid',
					title: 'productid',
					width: 100,
					sortable: true
				},
				{
					field: 'productname',
					title: 'productname',
					width: 180,
					sortable: true
				},
				{
					field: 'unitcost',
					title: 'unitcost',
					width: 100
				},
				{
					field: 'listprice',
					title: 'listprice',
					width: 100
				},
				{
					field: 'attr1',
					title: 'attr1',
					width: 100
				},
				{
					field: 'itemid',
					title: 'itemid',
					width: 100
				},
				{
					field: 'status',
					title: 'status',
					width: 100
				}
			]
		],
		data: {
			"total": 30,
			"rows": [{
					"productid": "FI-SW-01",
					"productname": "Koi",
					"unitcost": 10.00,
					"status": "P",
					"listprice": 36.50,
					"attr1": "Large",
					"itemid": "EST-1"
				},
				{
					"productid": "K9-DL-01",
					"productname": "Dalmation",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 18.50,
					"attr1": "Spotted Adult Female",
					"itemid": "EST-10"
				},
				{
					"productid": "RP-SN-01",
					"productname": "Rattlesnake",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 38.50,
					"attr1": "Venomless",
					"itemid": "EST-11"
				},
				{
					"productid": "RP-SN-01",
					"productname": "Rattlesnake",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 26.50,
					"attr1": "Rattleless",
					"itemid": "EST-12"
				},
				{
					"productid": "RP-LI-02",
					"productname": "Iguana",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 35.50,
					"attr1": "Green Adult",
					"itemid": "EST-13"
				},
				{
					"productid": "FL-DSH-01",
					"productname": "Manx",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 158.50,
					"attr1": "Tailless",
					"itemid": "EST-14"
				},
				{
					"productid": "FL-DSH-01",
					"productname": "Manx",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 83.50,
					"attr1": "With tail",
					"itemid": "EST-15"
				},
				{
					"productid": "FL-DLH-02",
					"productname": "Persian",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 23.50,
					"attr1": "Adult Female",
					"itemid": "EST-16"
				},
				{
					"productid": "FL-DLH-02",
					"productname": "Persian",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 89.50,
					"attr1": "Adult Male",
					"itemid": "EST-17"
				},
				{
					"productid": "AV-CB-01",
					"productname": "Amazon Parrot",
					"unitcost": 92.00,
					"status": "P",
					"listprice": 63.50,
					"attr1": "Adult Male",
					"itemid": "EST-18"
				},
				{
					"productid": "FI-SW-01",
					"productname": "Koi",
					"unitcost": 10.00,
					"status": "P",
					"listprice": 36.50,
					"attr1": "Large",
					"itemid": "EST-1"
				},
				{
					"productid": "K9-DL-01",
					"productname": "Dalmation",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 18.50,
					"attr1": "Spotted Adult Female",
					"itemid": "EST-10"
				},
				{
					"productid": "RP-SN-01",
					"productname": "Rattlesnake",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 38.50,
					"attr1": "Venomless",
					"itemid": "EST-11"
				},
				{
					"productid": "RP-SN-01",
					"productname": "Rattlesnake",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 26.50,
					"attr1": "Rattleless",
					"itemid": "EST-12"
				},
				{
					"productid": "RP-LI-02",
					"productname": "Iguana",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 35.50,
					"attr1": "Green Adult",
					"itemid": "EST-13"
				},
				{
					"productid": "FL-DSH-01",
					"productname": "Manx",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 158.50,
					"attr1": "Tailless",
					"itemid": "EST-14"
				},
				{
					"productid": "FL-DSH-01",
					"productname": "Manx",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 83.50,
					"attr1": "With tail",
					"itemid": "EST-15"
				},
				{
					"productid": "FL-DLH-02",
					"productname": "Persian",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 23.50,
					"attr1": "Adult Female",
					"itemid": "EST-16"
				},
				{
					"productid": "FL-DLH-02",
					"productname": "Persian",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 89.50,
					"attr1": "Adult Male",
					"itemid": "EST-17"
				},
				{
					"productid": "AV-CB-01",
					"productname": "Amazon Parrot",
					"unitcost": 92.00,
					"status": "P",
					"listprice": 63.50,
					"attr1": "Adult Male",
					"itemid": "EST-18"
				},
				{
					"productid": "FI-SW-01",
					"productname": "Koi",
					"unitcost": 10.00,
					"status": "P",
					"listprice": 36.50,
					"attr1": "Large",
					"itemid": "EST-1"
				},
				{
					"productid": "K9-DL-01",
					"productname": "Dalmation",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 18.50,
					"attr1": "Spotted Adult Female",
					"itemid": "EST-10"
				},
				{
					"productid": "RP-SN-01",
					"productname": "Rattlesnake",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 38.50,
					"attr1": "Venomless",
					"itemid": "EST-11"
				},
				{
					"productid": "RP-SN-01",
					"productname": "Rattlesnake",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 26.50,
					"attr1": "Rattleless",
					"itemid": "EST-12"
				},
				{
					"productid": "RP-LI-02",
					"productname": "Iguana",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 35.50,
					"attr1": "Green Adult",
					"itemid": "EST-13"
				},
				{
					"productid": "FL-DSH-01",
					"productname": "Manx",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 158.50,
					"attr1": "Tailless",
					"itemid": "EST-14"
				},
				{
					"productid": "FL-DSH-01",
					"productname": "Manx",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 83.50,
					"attr1": "With tail",
					"itemid": "EST-15"
				},
				{
					"productid": "FL-DLH-02",
					"productname": "Persian",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 23.50,
					"attr1": "Adult Female",
					"itemid": "EST-16"
				},
				{
					"productid": "FL-DLH-02",
					"productname": "Persian",
					"unitcost": 12.00,
					"status": "P",
					"listprice": 89.50,
					"attr1": "Adult Male",
					"itemid": "EST-17"
				},
				{
					"productid": "AV-CB-01",
					"productname": "Amazon Parrot",
					"unitcost": 92.00,
					"status": "P",
					"listprice": 63.50,
					"attr1": "Adult Male",
					"itemid": "EST-18"
				}
			]
		}

	});
</script>